<%--
  Created by IntelliJ IDEA.
  User: deer
  Date: 2021/5/5
  Time: 9:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>轮播图片</title>
    <link rel="stylesheet"
          href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
<div class=" col-md-9 carousel slide"
     style="padding-left: 10px; width: 900px; height: 450px" id="demo"
     data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="imgs" src="<%=request.getContextPath() %>/static/img/timg1.jpg" alt="1">
        </div>
        <div class="carousel-item">
            <img class="imgs" src="<%=request.getContextPath() %>/static/img/timg2.jpg" alt="2">
        </div>
        <div class="carousel-item">
            <img class="imgs" src="<%=request.getContextPath() %>/static/img/timg3.jpg" alt="3">
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</body>
</html>
